<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>竹Blog</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="css/font-awesome.css">
	<script src="js/time.js"></script>
</head>
<body>
	<!-- 导航 start -->
	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collpased" data-toggle="collapse" data-target="#navbar-collapse-menu" aria-expanded="false">
					<span class="sr-only">展开导航</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a href="#" class="navbar-brand">竹Blog</a>
			</div>

			<div class="collapse navbar-collapse navbar-right" id="navbar-collapse-menu">
				<ul class="nav navbar-nav">
					<li class="active dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">读书笔记 <span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="#">工具篇</a></li>
							<li><a href="#">编程语言</a></li>
							<li role="separator" class="divider"></li>
							<li><a href="#">锋利的JQuery</a></li>
							<li><a href="#">More&gt;&gt;</a></li>
						</ul>
					</li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">惬意生活 <span class="caret"></span></a>
						<ul class="dropdown-menu">
							<li><a href="#">生活小记</a></li>
							<li><a href="#">旅游计划</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<!-- toggle end -->
	</nav>
	<!-- 导航 end -->
	
	<!-- 图片轮播区 start -->
	<div id="myCarousel" class="carousel slide" data-ride="carousel">
		<!-- 轮播（carousel）指标 -->
		<ol class="carousel-indicators">
			<li data-target="#myCarousel" dtat-slide-to="0" class="active"></li>
			<li data-target="#myCarousel" dtat-slide-to="1"></li>
			<li data-target="#myCarousel" dtat-slide-to="2"></li>
		</ol>
		<!-- 轮播（carousel）项目 -->
		<div class="carousel-inner" role="listbox">
			<div class="item active">
				<img src="images/banner1.jpg" alt="first">
				<div class="carousel-caption">
					<h1>昂坪风景区</h1>
					<p>360度全方位的欣赏香港的山区</p>
				</div>
			</div>
			<div class="item">
				<img src="images/banner2.jpg" alt="second">
				<div class="carousel-caption">
					<h1>女人街</h1>
					<p>香港作为购物天堂的经典街道</p>
				</div>
			</div>
			<div class="item">
				<img src="images/banner3.jpg" alt="third">
				<div class="carousel-caption">
					<h1>昂坪2</h1>
					<p>坐缆车下来还是很不错的</p>
				</div>
			</div>
		</div>
		 <!-- 轮播导航 -->
		 <a href="#myCarousel" class="carousel-control left" role="button" data-slide="prev">
		 	<span class="glyphicon glyphicon-chevron-left"></span>
		 	<span class="sr-only">Previous</span>
		 </a>
		 <a href="#myCarousel" class="carousel-control right" role="button" data-slide="next">
		 	<span class="glyphicon glyphicon-chevron-right"></span>
		 	<span class="sr-only">Next</span>
		 </a>
	</div>
	<!-- 图片轮播区 end -->

	<!-- 主要内容区 start -->
	<div class="container">
		<div class="row">
			<div class="col-md-9">
				<article>
					<h2 class="title_tj">
						<p>文章<span>推荐</span></p>
					</h2>
					<div class="bloglist">
						<h3><a href="#">Blog文章1</a></h3>
						<figure>
							<a href="#" title="Blog文章1"><img src="images/img1.png" alt="Blog文章1"></a>
						</figure>
						<div class="quickview">
							<p>JavaScript 是世界上最流行的脚本语言。<br/>
								JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。<br/>
								JavaScript 被设计为向 HTML 页面增加交互性。<br/>
								许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。<br/>几乎每个人都有能力将小的 JavaScript 片段添加到网页中。
							</p>
							<a href="#">阅读全文&gt;&gt;</a>
						</div>
						<p class="dateview">
							<span>
								<i class="fa fa-clock-o fa-lg"></i>
								2015-12-07
							</span>
							<span class="commentIcon">
								<i class="fa fa-commenting-o fa-lg"></i>
								暂无评论
							</span>
							<span class="userIcon">
								<i class="fa fa-user fa-lg"></i>
								小猪猪
							</span>
							<span>
								<i class="fa fa-tags fa-lg"></i>
								<a href="#">学习笔记</a>
							</span>
						</p>
						<h3><a href="#">Blog文章1</a></h3>
						<figure>
							<a href="#" title="Blog文章1"><img src="images/img2.png" alt="Blog文章1"></a>
						</figure>
						<div class="quickview">
							<p>JavaScript 是世界上最流行的脚本语言。<br/>
								JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。<br/>
								JavaScript 被设计为向 HTML 页面增加交互性。<br/>
								许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。<br/>几乎每个人都有能力将小的 JavaScript 片段添加到网页中。
							</p>
							<a href="#">阅读全文&gt;&gt;</a>
						</div>
						<p class="dateview">
							<span>
								<i class="fa fa-clock-o fa-lg"></i>
								2015-12-07
							</span>
							<span class="commentIcon">
								<i class="fa fa-commenting-o fa-lg"></i>
								暂无评论
							</span>
							<span class="userIcon">
								<i class="fa fa-user fa-lg"></i>
								小猪猪
							</span>
							<span>
								<i class="fa fa-tags fa-lg"></i>
								<a href="#">学习笔记</a>
							</span>
						</p>
						<h3><a href="#">Blog文章1</a></h3>
						<figure>
							<a href="#" title="Blog文章1"><img src="images/img1.png" alt="Blog文章1"></a>
						</figure>
						<div class="quickview">
							<p>JavaScript 是世界上最流行的脚本语言。<br/>
								JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。<br/>
								JavaScript 被设计为向 HTML 页面增加交互性。<br/>
								许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。<br/>几乎每个人都有能力将小的 JavaScript 片段添加到网页中。
							</p>
							<a href="#">阅读全文&gt;&gt;</a>
						</div>
						<p class="dateview">
							<span>
								<i class="fa fa-clock-o fa-lg"></i>
								2015-12-07
							</span>
							<span class="commentIcon">
								<i class="fa fa-commenting-o fa-lg"></i>
								暂无评论
							</span>
							<span class="userIcon">
								<i class="fa fa-user fa-lg"></i>
								小猪猪
							</span>
							<span>
								<i class="fa fa-tags fa-lg"></i>
								<a href="#">学习笔记</a>
							</span>
						</p>
						<h3><a href="#">Blog文章1</a></h3>
						<figure>
							<a href="#" title="Blog文章1"><img src="images/img2.png" alt="Blog文章1"></a>
						</figure>
						<div class="quickview">
							<p>JavaScript 是世界上最流行的脚本语言。<br/>
								JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。<br/>
								JavaScript 被设计为向 HTML 页面增加交互性。<br/>
								许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有非常简单的语法。<br/>几乎每个人都有能力将小的 JavaScript 片段添加到网页中。
							</p>
							<a href="#">阅读全文&gt;&gt;</a>
						</div>
						<p class="dateview">
							<span>
								<i class="fa fa-clock-o fa-lg"></i>
								2015-12-07
							</span>
							<span class="commentIcon">
								<i class="fa fa-commenting-o fa-lg"></i>
								暂无评论
							</span>
							<span class="userIcon">
								<i class="fa fa-user fa-lg"></i>
								小猪猪
							</span>
							<span>
								<i class="fa fa-tags fa-lg"></i>
								<a href="#">学习笔记</a>
							</span>
						</p>
					</div>
					<nav>
					<ul class="pager">
					    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
					    <span>1</span><span>/</span><span>10</span>
					    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
					  </ul>
					</nav>
				</article>
			</div>
			<div class="col-md-3">
				<!-- 搜索区 start-->
				<div class="widget">
					<div class="widget_title">
						<h3>站内搜索</h3>
					</div>
					<div class="tb_widget_search">
						<form action="/search/" target="_blank" method="get">
							<input type="text" name="q" size="40" placeholder="Search in site..." class="searchText">
							<input type="submit" value="Search" class="searchButton">
						</form>
					</div>
				</div>
				<!-- 搜索区 end -->
				<!-- 时间轴 start -->
				<div class="widget">
					<div class="widget_title">
						<h3>时间轴</h3>
					</div>
					<div class="tb_widget_timeline clearfix">
						<article>
							<span class="date">07/12/2015</span>
							<span class="author">小猪</span>
							<div class="timeline_content">
								<i class="fa fa-clock-o fa-lg"></i>
								<h3><a href="#" data-toggle="popover" title="这是最新的一篇文章">这是最新的一篇文章</a></h3>
							</div>
						</article>
						<article>
							<span class="date">07/12/2015</span>
							<span class="author">小猪</span>
							<div class="timeline_content">
								<i class="fa fa-clock-o fa-lg"></i>
								<h3><a href="#" data-toggle="popover" title="这是最新的一篇文章">这是最新的一篇文章</a></h3>
							</div>
						</article>
						<article>
							<span class="date">07/12/2015</span>
							<span class="author">小猪</span>
							<div class="timeline_content">
								<i class="fa fa-clock-o fa-lg"></i>
								<h3><a href="#" data-toggle="popover" title="这是最新的一篇文章">这是最新的一篇文章</a></h3>
							</div>
						</article>
						<article>
							<span class="date">07/12/2015</span>
							<span class="author">小猪</span>
							<div class="timeline_content">
								<i class="fa fa-clock-o fa-lg"></i>
								<h3><a href="#" data-toggle="popover" title="这是最新的一篇文章">这是最新的一篇文章</a></h3>
							</div>
						</article>
						<article>
							<span class="date">07/12/2015</span>
							<span class="author">小猪</span>
							<div class="timeline_content">
								<i class="fa fa-clock-o fa-lg"></i>
								<h3><a href="#" data-toggle="popover" title="这是最新的一篇文章">这是最新的一篇文章</a></h3>
							</div>
						</article>
						<article>
							<span class="date">07/12/2015</span>
							<span class="author">小猪</span>
							<div class="timeline_content">
								<i class="fa fa-clock-o fa-lg"></i>
								<h3><a href="#" data-toggle="popover" title="这是最新的一篇文章">这是最新的一篇文章</a></h3>
							</div>
						</article>
						<article>
							<span class="date">07/12/2015</span>
							<span class="author">小猪</span>
							<div class="timeline_content last_timeline">
								<i class="fa fa-clock-o fa-lg"></i>
								<h3><a href="#" data-toggle="popover" title="这是最新的一篇文章">这是最新的一篇文章</a></h3>
							</div>
						</article>
					</div>
				</div>
				<!-- 时间轴 end -->
				<!-- 标签 start -->
				<div class="widget">
					<div class="widget_title">
						<h3>标签</h3>
					</div>
					<div class="tb_widget_tagcloud clearfix">
						<a href="#">Python</a>
						<a href="#">html5</a>
						<a href="#">css3</a>
						<a href="#">jekyll</a>
						<a href="#">github</a>
						<a href="#">Python</a>
						<a href="#">html5</a>
						<a href="#">css3</a>
						<a href="#">jekyll</a>
						<a href="#">github</a>
						<a href="#">Python</a>
						<a href="#">html5</a>
						<a href="#">css3</a>
						<a href="#">jekyll</a>
						<a href="#">github</a>
					</div>
				</div>
				<!-- 标签 end -->
				<!-- 友情链接 start -->
				<div class="widget">
					<div class="widget_title">
						<h3>友情链接</h3>
					</div>
					<div class="tb_widget_links">
						<ul>
							<li>
								<i class="fa fa-chevron-right"></i>
								<a href="#">Github</a>
								<i class="fa fa-github fa-lg links_icon"></i>
							</li>
							<li>
								<i class="fa fa-chevron-right"></i>
								<a href="#">Weibo</a>
								<i class="fa fa-weibo fa-lg links_icon"></i>
							</li>
							<li>
								<i class="fa fa-chevron-right"></i>
								<a href="#">Facebook</a>
								<i class="fa fa-facebook fa-lg links_icon"></i>
							</li>
						</ul>
					</div>
				</div>
				<!-- 友情链接 end -->
			</div>
		</div>
	</div>
	<!-- 主要内容区 end -->
	
	<footer>
		
	</footer>

	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
</body>
</html>